<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xr {
            width: 100px;
            height: 50px;
            /* display: none; */
        }

        .anniu {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 300px;
            left: 500px;
        }
    </style>
</head>

<body>
    <h1>待办事项</h1>
    <input type="text" class="tian"><button onclick="add()">添加事项</button>
    <div class="kuang">
        <h2>事项列表</h2>
        <div class="xr">

        </div>
        <div class="cha">

        </div>
    </div>
    <div class="anniu">
        <button onclick="suo()">查看所有事项</button> <br>
        <button onclick="yi()">查看已完成事项</button> <br>
        <button onclick="wei()">查看未完成事项</button><br>
        <button onclick="qing()">清除所有事项</button>
    </div>

    <script>

        var arr = [
            {
                id: 1,
                name: '睡觉',
            },
            {
                id: 2,
                name: '吃饭',
            },
            {
                id: 3,
                name: '上班',
            },
            {
                id: 4,
                name: '上学',
            },
            {
                id: 5,
                name: '下班',
            },
        ]

        // 渲染
        var xr = document.querySelector('.xr')
        var sp_1 = document.querySelectorAll('sp')
        function apply() {
            xr.innerHTML = ''
            arr.forEach(item => {
                xr.innerHTML += `
                <div class="xr">
            <input type="checkbox"><span class="sp">${item.name}</span><button onclick="del(${item.id})">删除</button>
        </div>
                `
            })
        } apply()

        // 添加
        var tian = document.querySelector('.tian')
        function add() {
            arr.push({
                id: arr.length,
                name: tian.value,
                is: false
            })
            apply()
        }
        // 删除
        function del(i) {
            var a = arr.findIndex(item => item.id == i)
            arr.splice(a, 1)
            apply()
        }
        // 查看所有事项
        var cha = document.querySelector('cha')
        function suo(i) {
            cha.innerHTML = ''
            arr.forEach(item => {
                cha.innerHTML += `
              <div class="cha">
            <input type="checkbox"><span class="sha">${item.name}</span><button onclick="del(${item.id})">删除</button>
        </div>
                `
            })
        }
        //查看已完成事项
        function yi() {

        }
        // 查看未完成事项
        function wei() {

        }
        // 清除所有事项
        function qing() {
            arr = []
            apply()
        }
        apply()
    </script>
</body>

</html>